<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Fuse Components</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <span class="ml-1 text-secondary">Services</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Media Watcher
                </h2>
            </div>
        </div>
        <button
            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
            mat-icon-button
            (click)="toggleDrawer()">
            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
        </button>
    </div>

    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">

        <p>
            <strong>FuseMediaWatcherService</strong> is a singleton service to watch media changes. It automatically registers the breakpoints from TailwindCSS configuration, so
            you can use the service without needing to configure it first.
        </p>

        <h2>Module</h2>
        <textarea
            fuse-highlight
            lang="typescript">
            import { FuseMediaWatcherModule } from '@fuse/services/media-watcher';
        </textarea>

        <h2>Methods</h2>
        <p>
            To watch changes on registered breakpoints, you can use the <strong>onMediaChange$</strong> getter:
        </p>
        <!-- @formatter:off -->
        <textarea fuse-highlight lang="typescript">
            import { FuseMediaWatcherService } from '@fuse/services/config';

            /**
             * Constructor
             */
            constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
            {
                // Subscribe to media changes
                this._fuseMediaWatcherService.onMediaChange$
                    .pipe(takeUntil(this._unsubscribeAll))
                    .subscribe(({matchingAliases}) => {

                        // Check if the breakpoint is 'md' and up
                        this.isScreenSmall = matchingAliases.includes('md');
                    });
            }
        </textarea>
        <!-- @formatter:on -->
        <p>
            You can also listen for custom media queries using <code>onMediaQueryChange$(query: string)</code> method:
        </p>
        <!-- @formatter:off -->
        <textarea fuse-highlight lang="typescript">
            import { FuseMediaWatcherService } from '@fuse/services/config';

            /**
             * Constructor
             */
            constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
            {
                // Subscribe to media changes
                this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
                    .pipe(takeUntil(this._unsubscribeAll))
                    .subscribe((state) => {

                        // Calculate the drawer mode
                        this.drawerMode = state.matches ? 'side' : 'over';
                    });
            }
        </textarea>
        <!-- @formatter:on -->

    </div>

</div>
